<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>05_ES10-Object.fromEntries</title>
  <!-- 
  在 JavaScript 的 ES10（ECMAScript 2019）中，新增了一个非常实用的方法： `Object.fromEntries()` 。这个方法用于将一个键值对的列表转换为对象。
  一、定义
  `Object.fromEntries()`  方法接受一个可迭代的键值对列表（如数组或其他可迭代对象），并将其转换为一个对象。这个方法通常与  `Object.entries()`  一起使用，后者用于将对象转换为键值对数组。

  二、语法
  Object.fromEntries(iterable);
  - iterable：一个可迭代对象，通常是一个数组或其他可迭代的数据结构，内部的每个元素都是一个包含两个元素的数组，分别代表键和值。

  三、示例
   1. 从数组转换为对象
  const entries = [['name', '小明'], ['age', 25], ['gender', '男']];
  const obj = Object.fromEntries(entries);
  console.log(obj); // 输出: { name: '小明', age: 25, gender: '男' }
   2. 从 Map 转换为对象
  const map = new Map();
  map.set('name', '小红');
  map.set('age', 30);

  const objFromMap = Object.fromEntries(map);
  console.log(objFromMap); // 输出: { name: '小红', age: 30 }
   3. 从数组中动态生成对象
  const arr = [['a', 1], ['b', 2], ['c', 3]];
  const obj = Object.fromEntries(arr.map(([key, value]) => [key.toUpperCase(), value * 2]));
  console.log(obj); // 输出: { A: 2, B: 4, C: 6 }
  四、总结

  - 功能： `Object.fromEntries()`  方法用于将可迭代的键值对列表转换为对象，简化了对象的构建过程。
  - 参数：接受一个可迭代对象，通常是数组或 Map，要求内部元素为包含两个元素的数组。
  - 使用场景：常用于从数组或 Map 创建对象，尤其在需要动态生成对象时非常方便。

  通过使用  `Object.fromEntries()` ，可以更方便地将键值对转换为对象，从而提高代码的可读性和简洁性。
  -->
</head>
<body>

  <script>
    const obj = {
      name: '小明',
      age: 25,
      gender: '男'
    }

    const entries = Object.entries(obj)
    const fromEntries = Object.fromEntries(entries)
    console.log(entries, fromEntries);

    const arr = [['name', '小明'], ['age', 25], ['gender', '男']];
    const fromEntries2 = Object.fromEntries(entries);
    console.log(fromEntries2); // 输出: { name: '小明', age: 25, gender: '男' }
    
    // 应用
    const searchStr = "?name=小明&age=25&gender=男"
    const searchParams = new URLSearchParams(searchStr)
    const searchObj = Object.fromEntries(searchParams)
    console.log(searchParams.get("name"))
    console.log(searchParams.get("age"))
    console.log(searchParams.entries()) // URLSearchParams Iterator {}
    console.log(searchObj, searchParams); // 输出: { name: '小明', age: '25', gender: '男' }

    // for (const [key, value] of Object.entries(searchParams)) { // 无法执行
    //   console.log(`${key}: ${value}`); 
    // }

    for (const [key, value] of searchParams.entries()) {
      console.log(`${key}: ${value}`);
    }


  </script>
  
</body>
</html>